<template>
  <div>
    <yn-input-search v-model="name" :value="name" placeholder="name" />
    <yn-input-search v-model="age" :value="age" placeholder="age" />
    <yn-input-search
      v-model="telephone"
      :value="telephone"
      placeholder="telephone"
    />

    <yn-button-group>
      <yn-button type="primary" icon="search" @click="search" />
      <yn-button type="primary" icon="sync" @click="reset" />
      <yn-button
        type="primary"
        icon="up"
        @click="showtable"
        v-if="tablevisiable"
      />
      <yn-button
        type="primary"
        icon="down"
        @click="showtable"
        v-if="!tablevisiable"
      />
    </yn-button-group>
    <yn-table :columns="columns" :dataSource="usertemp" v-if="tablevisiable">
      <a slot="name" slot-scope="text">{{ text }}</a>
      <span slot="table.action" slot-scope="record">
        <a href="javascript:;" @click="add()">Add</a>
        <yn-divider type="vertical" />
        <a href="javascript:;" @click="mod(record)">Modify</a>
        <yn-divider type="vertical" />
        <yn-popconfirm
          v-if="usertemp.length"
          title="是否删除?"
          @confirm="() => onDelete()"
          style="marginRight:15px;fontWeight:500"
        >
          <a href="javascript:;" @click="del(record)">Delete</a>
        </yn-popconfirm>
      </span>
    </yn-table>
    <!--添加用户-->
    <yn-modal
      title="Title"
      :visible="visible"
      @ok="handleOk"
      :confirmLoading="confirmLoading"
      @cancel="handleCancel"
    >
      <yn-input v-model="name" placeholder="Name"> </yn-input>
      <br />
      <br />
      <yn-input v-model="age" placeholder="Age"> </yn-input>
      <br />
      <br />
      <yn-input v-model="telephone" placeholder="Telephone"> </yn-input>
    </yn-modal>
    <!--修改用户-->
    <yn-modal
      title="Title"
      :visible="editvisible"
      @ok="editOk"
      :confirmLoading="confirmLoading"
      @cancel="editCancel"
    >
      <yn-input v-model="name" placeholder="Name"> </yn-input>
      <br />
      <br />
      <yn-input v-model="age" placeholder="Age"> </yn-input>
      <br />
      <br />
      <yn-input v-model="telephone" placeholder="Telephone"> </yn-input>
    </yn-modal>
    <!-- 分页 -->
    <yn-pagination
      v-model="pageNum"
      :total="total"
      :page-size="pageSize"
      @change="onChangepageNum"
      :hideOnSinglePage="false"
      style="margin-left:63%;margin-top:20px;"
      v-if="tablevisiable"
    >
    </yn-pagination>
  </div>
</template>

<script>
import "yn-p1/libs/components/yn-table";
import "yn-p1/libs/components/yn-divider";
import "yn-p1/libs/components/yn-modal";
import "yn-p1/libs/components/yn-input";
import "yn-p1/libs/components/yn-popconfirm";
import "yn-p1/libs/components/yn-pagination/";
import "yn-p1/libs/components/yn-icon/";
import "yn-p1/libs/components/yn-input-search/";
import "yn-p1/libs/components/yn-button/";
import "yn-p1/libs/components/yn-button-group/";
export default {
  data() {
    return {
      user: [
        {
          name: "王二狗",
          age: 33,
          telephone: "123456"
        },
        {
          name: "张三",
          age: 38,
          telephone: "214353"
        }
      ],
      columns: [
        {
          title: "Name",
          dataIndex: "name",
          key: "name",
          scopedSlots: {
            customRender: "name"
          }
        },
        {
          title: "Age",
          dataIndex: "age",
          key: "age"
        },
        {
          title: "Telephone",
          dataIndex: "telephone",
          key: "telephone"
        },
        {
          title: "Action",
          key: "action",
          scopedSlots: {
            customRender: "action"
          }
        }
      ],
      visible: false,
      editvisible: false,
      confirmLoading: false,
      tablevisiable: true,
      usertemp: [],
      userfliter: [],
      // 分页
      pageNum: 1,
      pageSize: 5,
      total: 50,
      name: "",
      age: null,
      telephone: ""
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.usertemp = this.user.slice(
        (this.pageNum - 1) * this.pageSize,
        this.pageNum * this.pageSize
      );
    },
    add() {
      this.visible = true;
    },
    mod(record) {
      this.editvisible = true;
      this.name = record.name;
      this.age = record.age;
      this.telephone = record.telephone;
    },
    del(record) {
      this.name = record.name;
      this.age = record.age;
      this.telephone = record.telephone;
    },
    handleOk() {
      this.visible = false;
      if (this.name != "" && this.age != null && this.telephone != "") {
        let obj = {
          name: this.name,
          age: this.age,
          telephone: this.telephone
        };
        this.user.push(obj);
      }
      this.init();
      (this.name = ""), (this.age = null), (this.telephone = "");
    },
    handleCancel() {
      this.visible = false;
      (this.name = ""), (this.age = null), (this.telephone = "");
    },
    editOk() {
      this.editvisible = false;
      let obj = {
        name: this.name,
        age: this.age,
        telephone: this.telephone
      };
      this.user.forEach((item, index) => {
        if (item.name === obj.name || item.telephone === obj.telephone) {
          this.user.splice(index, 1, obj);
        }
      });
      this.init();
      (this.name = ""), (this.age = null), (this.telephone = "");
    },
    editCancel() {
      this.editvisible = false;
      (this.name = ""), (this.age = null), (this.telephone = "");
    },
    onDelete() {
      this.user.forEach((item, index) => {
        if (item.name === this.name) {
          this.user.splice(index, 1);
        }
      });
      this.init();
      (this.name = ""), (this.age = null), (this.telephone = "");
    },

    onChangepageNum(page) {
      this.pageNum = page;
      this.init();
    },
    showtable() {
      this.tablevisiable = !this.tablevisiable;
    },
    reset() {
      (this.name = ""), (this.age = null), (this.telephone = "");
      this.init();
    },
    search() {
      this.userfliter = this.user;
      if (this.name != "") {
        this.userfliter = this.userfliter.filter(item => {
          return item.name.match(this.name);
        });
      }
      if (this.age != null) {
        this.userfliter = this.userfliter.filter(item => {
          return item.age.toString().match(this.age);
        });
      }
      if (this.telephone != "") {
        this.userfliter = this.userfliter.filter(item => {
          return item.telephone.match(this.telephone);
        });
      }
      (this.name = ""), (this.age = null), (this.telephone = "");

      this.usertemp = this.userfliter.slice(
        (this.pageNum - 1) * this.pageSize,
        this.pageNum * this.pageSize
      );
    }
  }
};
</script>
